<script setup lang="tsx">
import { type GeneralSearchFormItem } from '@/components/advanced/generalAdvancedTable';
import { onMounted, ref } from 'vue';

const loading = ref(false);
const tableData = ref<any[]>([]);
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0
});

// 行选择相关
const selectedRowKeys = ref<(string | number)[]>([]);
const selectedRows = ref<any[]>([]);
const enableSelection = ref(true);

// 表格组件引用
const tableRef = ref();

// 工具栏按钮现在通过slot实现，不再需要配置数组

const searchFormItems: GeneralSearchFormItem[] = [
  { key: 'name', label: '名称', type: 'input' },
  { key: 'age', label: '年龄', type: 'input' },
  { key: 'age', label: '年龄', type: 'input' },
  { key: 'age', label: '年龄', type: 'input' },
  { key: 'age', label: '年龄', type: 'input' },
  { key: 'age', label: '年龄', type: 'input' },
  { key: 'age', label: '年龄', type: 'input' },
  {
    key: 'sex',
    label: '性别',
    type: 'select',
    options: [
      { label: '男', value: 1 },
      { label: '女', value: 0 }
    ]
  }
];

const columns: any[] = [
  { title: '名称', dataIndex: 'name', key: 'name', checked: true },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    checked: true,
    customRender: ({ text }: { text: number }) => (
      <div class="age-cell">
        <span style="font-size: 14px; color: #666;">{text}岁</span>
      </div>
    )
  },
  {
    title: '性别',
    dataIndex: 'sex',
    key: 'sex',
    customRender: ({ text }: { text: number }) => (text === 1 ? '男' : '女'),
    checked: true
  },
  { title: '操作', key: 'action', align: 'center', checked: true }
];

function handleSearch(model: any) {
  console.log('search', model);
  loadData();
}

function handleToolbarClick(key: string) {
  console.log('toolbar-click', key);
}

function handleTableChange(page: any, filters: any, sorter: any) {
  console.log('table-change', page, filters, sorter);
}

function handlePageChange(page: number, pageSize: number) {
  pagination.value.current = page;
  pagination.value.pageSize = pageSize;
  loadData();
}

// 处理行选择变化
function handleSelectionChange(keys: (string | number)[], rows: any[]) {
  selectedRowKeys.value = keys;
  selectedRows.value = rows;
  console.log('选中的行keys:', keys);
  console.log('选中的行数据:', rows);
}

// 切换选择功能
function toggleSelection() {
  enableSelection.value = !enableSelection.value;
  if (!enableSelection.value) {
    selectedRowKeys.value = [];
    selectedRows.value = [];
  }
}

// 导出选中数据
function handleExportSelectedData() {
  if (tableRef.value) {
    tableRef.value.exportSelectedData();
  }
}

// 处理导出数据事件
function handleExportData(selectedData: any[]) {
  console.log('导出数据:', selectedData);
  // 这里可以根据实际需求实现导出逻辑
  // 例如：转换为Excel、CSV等格式
}

function loadData() {
  loading.value = true;
  setTimeout(() => {
    const data = [];
    for (let i = 0; i < 10; i += 1) {
      data.push({
        id: i, // 添加id字段用于行选择
        key: i,
        name: `name${i}`,
        age: 10 + i,
        sex: i % 2
      });
    }
    tableData.value = data;
    pagination.value.total = 100;
    loading.value = false;
  }, 1000);
}

onMounted(() => {
  loadData();
});
</script>

<template>
  <div class="h-full">
    <GeneralAdvancedTable
      ref="tableRef"
      :loading="loading"
      :search-items="searchFormItems"
      :columns="columns"
      :data="tableData"
      :pagination="pagination"
      :selected-row-keys="selectedRowKeys"
      :enable-selection="enableSelection"
      @search="handleSearch"
      @toolbar-click="handleToolbarClick"
      @table-change="handleTableChange"
      @page-change="handlePageChange"
      @selection-change="handleSelectionChange"
      @export-data="handleExportData"
    >
      <!-- 表格自定义列 -->
      <template #bodyCell="{ column }">
        <template v-if="column.key === 'action'">
          <AButton type="primary" size="small">编辑</AButton>
          <AButton type="ghost" size="small" class="ml-2">删除</AButton>
          <AButton type="primary" size="small" class="ml-2">详情</AButton>
        </template>
      </template>
      <!-- 工具栏自定义按钮 -->
      <template #customTooBtn>
        <AButton type="primary" size="small" @click="handleToolbarClick('add')">
          <template #icon>
            <icon-ic-round-plus class="align-sub text-icon" />
          </template>
          <span class="ml-8px">新增</span>
        </AButton>
        <AButton type="primary" size="small" danger @click="handleToolbarClick('delete')">
          <template #icon>
            <icon-ic-round-delete class="align-sub text-icon" />
          </template>
          <span class="ml-8px">删除</span>
        </AButton>
        <AButton
          type="primary"
          size="small"
          :disabled="!enableSelection || selectedRowKeys.length === 0"
          @click="handleExportSelectedData"
        >
          <template #icon>
            <icon-ic-round-download class="align-sub text-icon" />
          </template>
          <span class="ml-8px">导出数据</span>
        </AButton>
        <AButton :type="enableSelection ? 'default' : 'primary'" size="small" @click="toggleSelection">
          {{ enableSelection ? '关闭选择' : '开启选择' }}
        </AButton>
        <span v-if="enableSelection && selectedRowKeys.length > 0" class="ml-2 text-sm text-gray-600">
          已选择 {{ selectedRowKeys.length }} 项
        </span>
      </template>
    </GeneralAdvancedTable>
  </div>
</template>

<style lang="scss" scoped></style>
